<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书搜索</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-ep+dxp/oz2RKF89ALMPGc7Z89QFa32C8Uv1A3TcEK8sMzXVysblLA3+eJWTzPJzT" crossorigin="anonymous"></script>

</head>
<body>
<div th:replace="fragments/header:: navbar"></div>
<div class="container">
    <div class="row">
        <div class="col-lg-9">
            <div class="my-4">

            </div>
        </div>
    </div>
    <div class="row">
        <div th:each="book:${books}" class="col-md-4">
            <div class="card border-light mb-3">
                <div class="card-body">
                    <p><a th:href="@{/books/{bookId}(bookId=${book.bookId})}">
                        <img height="300px"  th:src="@{|/bookImage?bookId=${book.bookId}|}"/>
                    </a></p>
                    <h2>[[${book.bookPrice}]]元</h2>
                    <p class="card-text">[[${book.bookName}]]<br>[[${book.bookAuthor}]]</p>
                    <a th:href="@{'/order/addBook/{bookId}'(bookId=${book.bookId})}">加入购物车</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>